<template>
  <div
    class="video-info-mini column q-gutter-y-md items-center"
    v-if="videoPageMiniMode"
  >
    <q-btn
      class="btn-mini"
      icon="mdi-alert-circle-outline"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-info
    >
      <q-popup-proxy anchor="top right" self="top left" v-if="currentVideo">
        <div class="mini-info-container mini-border q-pa-md">
          <div class="title">{{ currentVideo.title }}</div>
          <div class="view-count">
            {{ currentVideo.viewCount }} views ·
            {{ currentVideo.createTimeLabel }}
          </div>
          <div class="author-info row q-my-md">
            <q-avatar size="34px">
              <img :src="currentVideo?.creatorAvatar" />
            </q-avatar>
            <div class="column q-ml-sm">
              <div class="author-name">{{ currentVideo.creatorName }}</div>
              <div class="author-followers text-sub">
                {{ currentVideo.creatorFollowersCount }} Followers
              </div>
            </div>
          </div>
          <div class="video-description q-pa-xs">
            {{ currentVideo?.description }}
          </div>
        </div>
      </q-popup-proxy>
    </q-btn>
    <q-btn
      class="btn-mini"
      icon="mdi-thumbs-up-down"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-likes
    >
      <q-popup-proxy anchor="top right" self="top left" v-if="currentVideo">
        <div
          class="mini-like-container mini-border q-pa-md row justify-around items-center"
        >
          <div class="column">
            <q-btn
              style="font-size: 14px; width: 30px"
              :text-color="currentVideo.isLiked ? 'accent' : 'sub'"
              dense
              @click="toggleLike"
            >
              <div class="column">
                <q-icon name="mdi-thumb-up" />
                <div>{{ currentVideo.likeCount }}</div>
              </div>
            </q-btn>
          </div>
          <div class="column">
            <q-btn
              style="font-size: 14px; width: 30px"
              :text-color="currentVideo.isDisliked ? 'negative' : 'sub'"
              dense
              @click="toggleDislike"
            >
              <div class="column">
                <q-icon name="mdi-thumb-down" />
                <div>{{ currentVideo.dislikeCount }}</div>
              </div>
            </q-btn>
          </div>
        </div>
      </q-popup-proxy>
    </q-btn>
    <q-btn
      class="btn-mini"
      icon="img:/icons/podium.svg"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-compliments
    >
      <q-popup-proxy anchor="top right" self="top left" v-if="currentVideo">
        <compliment-view :video="currentVideo" />
      </q-popup-proxy>
    </q-btn>
    <q-btn
      class="btn-mini"
      icon="mdi-account-multiple-plus"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-followers
    />
    <q-btn
      class="btn-mini"
      icon="mdi-playlist-plus"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-playlists
    />
    <q-btn
      class="btn-mini"
      icon="mdi-share-variant"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-share
    />
    <q-btn
      class="btn-mini"
      icon="mdi-pin"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      @click="pin"
      v-singular-event:btn:pin-video
    />
    <q-space />
    <q-btn
      class="btn-mini"
      icon="mdi-view-dashboard"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-singular-event:btn:show-video-dashboard
    />
    <q-btn
      class="btn-mini"
      icon="mdi-record-circle-outline"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      v-if="currentVideo"
      :to="{ name: 'Studio', params: { id: currentVideo.id } }"
      v-singular-event:btn:go-to-studio
    />
    <q-btn
      class="btn-mini"
      icon="mdi-arrow-collapse-right"
      color="secondary"
      text-color="sub"
      size="12px"
      no-caps
      @click="videoPageMiniMode = false"
      v-singular-event:btn:close-video-left-mini-mode
    />
  </div>
  <div class="video-info column q-pr-md q-my-lg" v-else>
    <template v-if="currentVideo">
      <div class="title">{{ currentVideo?.title }}</div>
      <div class="view-count">
        {{ currentVideo!.viewCount }} {{ $t('video.left.views') }} ·
        {{ currentVideo!.createTimeLabel }}
      </div>
      <div class="author-info row q-my-lg">
        <q-avatar size="34px">
          <img :src="currentVideo!.creatorAvatar" />
        </q-avatar>
        <div class="column q-ml-sm">
          <div class="author-name">{{ currentVideo!.creatorName }}</div>
          <div class="author-followers text-sub">
            {{ currentVideo!.creatorFollowersCount }}
            {{ $t('video.left.followers') }}
          </div>
        </div>
      </div>
      <div class="video-description q-pa-xs">
        <p>{{ currentVideo!.description }}</p>
      </div>
      <div class="column q-mt-sm q-gutter-y-sm" style="width: 100%">
        <q-btn-group spread style="max-height: 36px" flat>
          <q-btn
            icon="mdi-thumb-up"
            color="secondary"
            :text-color="currentVideo!.isLiked ? 'accent' : 'sub'"
            :label="currentVideo!.likeCount"
            :flat="!currentVideo!.isLiked"
            @click="toggleLike"
            v-singular-event:btn:toggle-like
          />
          <q-btn
            color="secondary"
            icon="mdi-thumb-down"
            :text-color="currentVideo!.isDisliked ? 'negative' : 'sub'"
            :label="currentVideo!.dislikeCount"
            :flat="!currentVideo!.isDisliked"
            @click="toggleDislike"
            v-singular-event:btn:toggle-dislike
          />
        </q-btn-group>

        <q-btn
          color="secondary"
          text-color="sub"
          no-caps
          v-singular-event:btn:show-video-compliments
        >
          <div class="row justify-start items-center fit no-wrap">
            <q-icon name="img:/icons/podium.svg" />
            <div class="text-center" style="width: 100%">
              {{ $t('video.left.compliment') }}
            </div>
          </div>
          <q-popup-proxy anchor="top right" self="top left">
            <compliment-view :video="currentVideo" />
          </q-popup-proxy>
        </q-btn>
        <q-btn
          color="secondary"
          text-color="sub"
          no-caps
          v-singular-event:btn:show-video-follow
        >
          <div class="row justify-start items-center fit no-wrap">
            <q-icon name="mdi-account-multiple-plus" />
            <div class="text-center" style="width: 100%">
              {{ $t('video.left.follow') }}
            </div>
          </div>
          <q-popup-proxy anchor="top right" self="top left">
            <follow-view :video="currentVideo" />
          </q-popup-proxy>
        </q-btn>
        <q-btn
          color="secondary"
          text-color="sub"
          no-caps
          v-singular-event:btn:show-video-saveto
        >
          <div class="row justify-start items-center fit no-wrap">
            <q-icon name="mdi-playlist-plus" />
            <div class="text-center" style="width: 100%">
              {{ $t('video.left.save') }}
            </div>
          </div>
          <q-popup-proxy anchor="top right" self="top left">
            <saveto-view :video="currentVideo" />
          </q-popup-proxy>
        </q-btn>
        <q-btn
          color="secondary"
          text-color="sub"
          no-caps
          v-singular-event:btn:show-video-share
        >
          <div class="row justify-start items-center fit no-wrap">
            <q-icon name="mdi-share-variant" />
            <div class="text-center" style="width: 100%">
              {{ $t('video.left.share') }}
            </div>
          </div>
          <q-popup-proxy anchor="top right" self="top left">
            <share-view :video="currentVideo" />
          </q-popup-proxy>
        </q-btn>
        <q-btn
          color="secondary"
          text-color="sub"
          no-caps
          v-singular-event:btn:pin-video
        >
          <div class="row justify-start items-center fit no-wrap">
            <q-icon name="mdi-pin" />
            <div class="text-center" style="width: 100%">
              {{ $t('video.left.pin') }}
            </div>
          </div>
        </q-btn>
      </div>
      <q-space />
      <div class="column">
        <div class="self-end">
          <q-btn
            dense
            icon="mdi-arrow-collapse-left"
            text-color="sub"
            size="12px"
            @click="videoPageMiniMode = true"
            v-singular-event:btn:open-video-left-mini-mode
          />
        </div>
        <div class="row no-wrap q-gutter-x-sm">
          <q-btn
            class="col"
            dense
            icon="mdi-record-circle-outline"
            color="secondary"
            text-color="sub"
            :label="$t('video.left.studio')"
            no-wrap
            :to="{ name: 'Studio', params: { id: currentVideo!.id } }"
            v-singular-event:btn:open-video-studio
          />
          <q-btn
            class="col"
            dense
            no-wrap
            icon="mdi-view-dashboard"
            color="secondary"
            text-color="sub"
            :label="$t('video.left.panels')"
            @click="editPanels"
            v-singular-event:btn:show-video-edit-panels
          />
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { watch } from 'vue';
import ComplimentView from './ComplimentView.vue';
import FollowView from './FollowView.vue';
import SavetoView from './SavetoView.vue';
import ShareView from 'components/ShareView.vue';
import { storeToRefs } from 'pinia';
import { useVideoStore } from 'src/stores/video-store';
import { useUserStore } from 'src/stores/user-store';

const emits = defineEmits(['onModeChange', 'edit-panels']);
const videoStore = useVideoStore();
const userStore = useUserStore();
const { videoPageMiniMode, currentVideo } = storeToRefs(videoStore);

watch(videoPageMiniMode, (miniMode) => {
  emits('onModeChange', miniMode);
});
async function toggleLike() {
  await videoStore.toggleLikeVideo(currentVideo!.value!.id);
}
async function toggleDislike() {
  await videoStore.toggleDislikeVideo(currentVideo!.value!.id);
}
async function pin() {
  await userStore.pin({
    id: currentVideo!.value!.id,
    type: 'video',
    image: currentVideo!.value!.coverImage,
  });
}
function editPanels() {
  emits('edit-panels');
}
function miniMode() {
  videoPageMiniMode.value = true;
}
function fullMode() {
  videoPageMiniMode.value = false;
}
defineExpose({ miniMode, fullMode });
</script>
<style lang="sass" scoped>

.video-top-bar
  .title
    font-size: 14px
    font-weight: bold

.video-info
  width: 205px
  box-shadow: inset -4px 0px 6px 0px rgba(0, 0, 0, 0.32)
  .title
    font-size: 16px
    font-weight: bold
  .view-count
    color: $sub
  .author-info
    .author-name
      font-size: 12px
      font-weight: medium
    .author-followers
      font-size: 12px
  .video-description
    display: flex
    flex-wrap: wrap
    p
      position: relative
      overflow: hidden
      max-height: 100px // The Height of 3 rows
      display: -webkit-box
      -webkit-line-clamp: 5
      -webkit-box-orient: vertical
.video-info-mini
  width: 50px
  padding-right: 22px
  box-shadow: inset -4px 0px 6px 0px rgba(0, 0, 0, 0.32)
  .btn-mini
    width: 30px
    height: 30px
.mini-border
  border: 1px solid #404040
  border-radius: 3px
.mini-info-container
  max-width: 350px
  .title
    font-size: 16px
  .view-count
    color: $sub
.mini-like-container
  width: 126px
  height: 76px
</style>
